{% extends "base.html" %}
            {% block control %}<li class="treeview active">{% endblock %}
          {% block dnspod %}
                <li class="active"><a href="/dnspod/"><i class="fa fa-genderless"></i>节点解析调度</a></li>
             {% endblock %}
      <!-- Content Wrapper. Contains page content -->
             {% block content %}

          <ol class="breadcrumb">
            <li><i class="fa fa-television"></i> 管理中心</li>
            <li class="active">节点列表</li>
          </ol>
        </section>

        <!-- Main content -->
        <section class="content">

          <div class="row">
            <div class="col-xs-12">


              <div class="box">
                <div class="box-header">
                  <h3 class="box-title">记录列表</h3>
                    <div class="pull-right">
                 <div id="div1">{{ form_info.line_type }}</div>
                 <div id="div2">{{ form_info.record_type }}</div>
                  <button class="btn btn-primary"  onclick="addTr2('example1', 0)" ><i class="fa fa-plus-circle"></i>添加记录
                  </button>
                        </div>
                </div>

                <div class="box-body">
                <form class="form-horizontal" method="post">
                    {% csrf_token %}
                  <table id="example1" class="table table-bordered table-striped">
                    <thead>
                      <tr>
                        <th>主机记录</th>
                        <th>记录类型</th>
                        <th>线路类型</th>
                        <th>记录值</th>
                        <th>TTL</th>
                        <th>操作</th>
                      </tr>
                    </thead>
                    <tbody>
                    {% for dnspod in dnspod_list %}
                      <tr>
                        <td>{{ dnspod.host_record }}</td>
                        <td>{{ dnspod.record_type }}</td>
                        <td>{{ dnspod.line_type }}</td>
                        <td>{{ dnspod.record_value }}</td>
                        <td>{{ dnspod.TTL }}</td>
                        <td style="width:100px" >
                           </button><a href="/dnspod/del/{{ dnspod.id }}"><button type="button" class="btn btn-warning btn-xs"><i class="fa fa-calendar-o"></i>删除</button></a>
                            <button type="button" class="btn btn-primary btn-xs"><i class="fa fa-calendar-o"></i>暂停/启用</button><!--加个判断-->
                        </td>
                      </tr>
                    {% endfor %}
                    </tbody>
                  </table>
                </form>
                </div><!-- /.box-body -->
               </div><!-- /.box-header -->
              </div><!-- /.box -->
          </div><!-- /.row -->
        </section><!-- /.content -->
    {% endblock %}

  {% block js %}
    {% load staticfiles %}
        <!-- DataTables -->
    <script src="{% static "plugins/datatables/jquery.dataTables.min.js" %}"></script>
    <script src="{% static "plugins/datatables/dataTables.bootstrap.min.js" %}"></script>
    <script>document.getElementById("div1").style.display="none";</script>
    <script>document.getElementById("div2").style.display="none";</script>
    <!-- Optionally, you can add Slimscroll and FastClick plugins.
         Both of these plugins are recommended to enhance the
         user experience. Slimscroll is required when using the
         fixed layout. -->
      <script>

      function addTr(tab, row, trHtml){
     //获取table最后一行 $("#tab tr:last")
     //获取table第一行 $("#tab tr").eq(0)
     //获取table倒数第二行 $("#tab tr").eq(-2)
     var $tr=$("#"+tab+" tr").eq(row);
     if($tr.size()==0){
        alert("指定的table id或行数不存在！");
        return;
     }
     $tr.after(trHtml);
  }
     function addTr2(tab, row){
         a = document.getElementById("div1").innerHTML;
         b = document.getElementById("div2").innerHTML;
         var trHtml='<tr><td>{{ form_info.host_record}}</td><td>'+b+'</td><td>'+a+'</td><td>{{ form_info.record_value}}</td><td>{{ form_info.TTL}} </td><td style="width:100px" ><button type="submit" class="btn btn-primary btn-xs"><i class="fa fa-calendar-o"></i>保存</button> </td></tr>';
         addTr(tab, row, trHtml);
     }

      $(function () {
        $("#example1").DataTable();
      });
    </script>
  {% endblock %}
